import React from 'react'
import { EmptyState } from '../components/ui/EmptyState'
import { Button } from '../components/ui/Button'
import { History as HistoryIcon, Search } from 'lucide-react'

export function History() {

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Reading History</h1>
        <p className="text-gray-600">
          Track your research journey and reading patterns
        </p>
      </div>

      {/* Empty state */}
      <EmptyState
        icon={<HistoryIcon className="h-12 w-12 text-gray-400" />}
        title="No reading history yet"
        description="Your reading history and activity will appear here as you explore papers."
        action={
          <Button onClick={() => window.location.href = '/app/browse'}>
            <Search className="h-4 w-4 mr-2" />
            Start Reading
          </Button>
        }
      />
    </div>
  )
}